<template>
  <div class="about">
    <!-- <div>
      价格：<input type="text" v-model="price" />名称：<input
        type="text"
        v-model="title"
      />
      <button @click="submit">提交</button>
    </div> -->
    <table border="1" class="content">
      <tr>
        <th>id</th>
        <th>书名</th>
        <th>价格</th>
        <th>操作</th>
      </tr>

      <tr v-for="(item, index) in list" :key="item.id">
        <td>{{ item.id }}</td>
        <td>{{ item.title }}</td>
        <td>{{ item.price }}</td>
        <td>
          <button @click="remove(index)">删除</button>
          <!-- <button @click="handlerEdit(item, index)">编辑</button> -->
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import { computed } from "vue";
import { useStore } from "vuex";
// 引入vuex的实例对象; 从vue vuex vue-router中引入的所有的东西名字都是固定的
export default {
  setup(props) {
    const store = useStore();
    // store就是this.$store
    const list = computed(() => {
      return store.state.list;
    });

    const remove = (index) => {
      store.commit("remove", index);
      //调用一个mutation去删除
    };

    return { list, remove };
  },
};
</script>
